<template>
	<view class='page_cont'>
		<view class='check_input'>
			<view class='title'>单位名称</view>
			<input type="text" class='input' @input="input_unit" :value="businessName" placeholder="请输入单位名称" placeholder-style="color:rgba(121,133,148,0.5);">
		</view>
		<view class='check_item'>
			<view class='title'>在职时间</view>
			<view class="check_item_class">
				<view  @click="check_pop(1)" class="selectedPicker">
					<view class='nat'>{{startTime}}</view>
				</view>
				<view>-</view>
				<view @click="check_pop(2)" class="selectedPicker">
					<view class='nat'>{{endTime}}</view>
				</view>
			</view>
		</view>
		<!-- <view class='check_item' @click="check_pop(1)">
			<view class='title'>入职时间</view>
			<view class='nat'>{{startTime}}</view>
			<image class='icon' src="/static/icon43.png"></image>
		</view>
		<view class='check_item' @click="check_pop(2)">
			<view class='title'>离职时间</view>
			<view class='nat'>{{endTime}}</view>
			<image class='icon' src="/static/icon43.png"></image>
		</view> -->
		<view class='check_input'>
			<view class='title'>从事职业</view>
			<input type="text" class='input' @input="input_job" :value="job" placeholder="请输入从事职业" placeholder-style="color:rgba(121,133,148,0.5);">
		</view>
		<view class='check_input' @click="nav_desc()">
			<view class='title'>工作描述</view>
			<!-- <view class='nat' v-if="workDescribe">{{workDescribe}}</view> -->
			<rich-text class='nat' v-if="workDescribe" :nodes="workDescribe"></rich-text>
			<view class='text' v-else>请输入工作内容</view>
		</view>
		<view class='btn_wrap'>
			<view class='del_btn' @click="show_pop=true" v-if="id>0">删除</view>
			<view class='con_btn' @click="confirm_enducat()">保存</view>
		</view>
		<view class="mask" @touchmove.stop.prevent="moveHandle" v-show="show_pop">
			<view class='pop'>
				<view class='point'>确定删除该工作经历</view>
				<view class='btn_wrap_confirm'>
					<view class='btn' @click="show_pop = false">取消</view>
					<view class='btn' @click="confirm_del()">确定</view>
				</view>
			</view>
		</view>
		<pickerPop :showMask="show_mask" :showIndex="show_index" :title="title" :pickers="pickers" :value="value" :time='time' @closeMask="close_mask"
		 @pickerChange="picker_change" @confirmValue="confirm_value"></pickerPop>
	</view>
</template>

<script>
	import PickerPop from "../../components/pickerPop.vue"
	import resume from "../../api/myResume.js"
	import other from "../../utils/other.js"
	import util from "../../utils/util.js"
	export default {
		data() {
			return {
				id: '',
				businessName: '',
				show_mask: false,
				show_index: '',
				title: '',
				check_index: '',
				pickers: [],
				value: [],
				time: false,
				startTime: '',
				start_value: [0, 0],
				endTime: '',
				end_value: [0, 0],
				job: '',
				workDescribe: '',
				show_pop: false,
				switchOpen:true,
				dateStart:'',
				dateEnd:''
			}
		},
		onLoad(options) {
			var that = this;
			that.id = options.id;
			if (options.id > 0) {
				//
				resume.check_work_experience_byId({
					id: options.id
				}).then(res => {
					const { data } = res.data
					this.businessName = data.businessName
					this.startTime = this.format(data.entryTime)
					this.endTime = this.format(data.quitTime)
					this.job = data.positionName
					this.workDescribe = data.workDescribe.replace(/\n/g, "<br>")
					console.log(this.workDescribe);
				})
			}
		},
		methods: {
			// 单位名称
			input_unit(e) {
				this.businessName = e.detail.value;
			},
			input_job(e) {
				this.job = e.detail.value
			},
			// 选择框
			check_pop(index) {
				this.check_index = index;
				switch (index) {
					case 1:
						this.show_index = 4;
						this.title = '入职时间';
						this.time = true;
						this.value = this.start_value;
						this.show_mask = true;
						break;
					case 2:
						this.show_index = 4;
						this.title = '离职时间';
						this.time = true;
						this.value = this.end_value;
						this.show_mask = true;
						break;
				}
			},
			// 关闭选择框
			close_mask() {
				this.show_mask = false
				this.time = false;
			},
			// 选择
			picker_change(res) {
				this.value = res;
				console.log(this.value);
			},
			// 确认
			confirm_value(data) {
				var index = this.check_index;
				switch (index) {
					case 1:
						this.start_value = this.value;
						this.startTime = data[0]+'-'+data[1]
						// let dateStart = new Date(this.startTime);
						// console.log(dateStart.getTime());
						break;
					case 2:
						this.end_value = this.value;
						this.endTime = data[0]+'-'+data[1]
						// let dateEnd = new Date(this.endTime);
						// console.log(dateEnd.getTime());
						break;
					case 3:
						this.job_value = this.value;
						this.job = this.jobs[this.value[0]];
						break;
					case 4:
						this.region_value = this.value;
						this.region = this.regions[0][this.value[0]] + '-' + this.regions[1][this.value[1]] + '-' + this.regions[2][this.value[
							2]]
						break;
				}
				this.close_mask();
			},
			// 工作描述
			nav_desc() {
				uni.navigateTo({
					url: '../jobDesc/jobDesc?type=1'+'&data='+this.workDescribe
				})
			},
			// 确认删除工作经历
			confirm_del() {
				resume.del_work_experience_byId({
					id: this.id
				}).then(res => {
					if (res.data.code === '200') {
						this.show_pop = false
						util.page_show_toast('删除成功', 3000)
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 2000)
					}
				})
			},
			// 保存
			confirm_enducat() {
				let valiteObj=[
					{
						value: this.businessName,
						show_toast:'请输入单位名称'
					},
					{
						value: this.startTime,
						show_toast:'请选择入职时间'
					},
					{
						value: this.endTime,
						show_toast:'请选择离职时间'
					},
					{
						value: this.job,
						show_toast:'请输入从事职业'
					},
					{
						value: this.workDescribe,
						show_toast:'请输入工作描述'
					},
				]
				for(const key of valiteObj){
					if(key.value===''){
						util.page_show_toast(key.show_toast, 3000)
						return
					}
				}
				let config = {
					businessName: this.businessName,
					entryTime: new Date(this.startTime+'-'+ '01').getTime(),
					quitTime: new Date(this.endTime+'-'+ '01').getTime(),
					positionName: this.job,
					workDescribe: this.workDescribe,
				}
				if(config.entryTime>=config.quitTime){
					util.page_show_toast('入职时间要小于离职时间', 3000)
					return
				}
				if (+this.id > -1) {
					config.id = this.id
					if(this.switchOpen){
						resume.edit_work_experience(config).then(res => {
							if (res.data.code === '200') {
								util.page_show_toast('编辑成功', 3000)
								this.switchOpen=false
								setTimeout(() => {
									uni.navigateBack({
										delta: 1
									})
								}, 2000)
							}
						})
					}
				} else {
					if(this.switchOpen){
						resume.add_work_experience(config).then(res => {
							if (res.data.code === '200') {
								util.page_show_toast('添加成功', 3000)
								this.switchOpen=false
								setTimeout(() => {
									uni.navigateBack({
										delta: 1
									})
								}, 2000)
							}
						})
					}
				}
			},
			// 时间处理
			add0(m) {
				return m < 10 ? '0' + m : m
			},
			format(shijianchuo) {
				var time = new Date(shijianchuo);
				var y = time.getFullYear();
				var m = time.getMonth() + 1;
				return y + '-' + this.add0(m) 
			}
		},
		components: {
			pickerPop: PickerPop
		}
	}
</script>

<style lang="scss">
	.page_cont {
		padding: 0 32rpx 120rpx 32rpx;

		.check_input {
			padding: 32rpx 0;
			border-bottom: 2rpx solid #F7F9FB;

			.title {
				height: 42rpx;
				font-size: 30rpx;
				font-weight: 600;
				line-height: 42rpx;
				color: #3F4A58;
				margin-bottom: 24rpx;
			}

			.input {
				height: 40rpx;
				font-size: 28rpx;
				font-weight: 400;
				line-height: 40rpx;
				color: #798594;
			}

			.nat {
				height: 40rpx;
				font-size: 28rpx;
				font-weight: 400;
				line-height: 40rpx;
				color: #798594;
			}

			.text {
				height: 40rpx;
				font-size: 28rpx;
				font-weight: 400;
				line-height: 40rpx;
				color: rgba(121, 133, 148, 0.5);
			}
		}

		.check_item {
			padding: 32rpx 0;
			border-bottom: 2rpx solid #F7F9FB;
			// display: flex;
			// flex-direction: row;
			// align-items: center;
			    display: flex;
			    flex-direction: column;
			    justify-content: flex-start;
			    align-items: baseline;
				 .check_item_class{
					 width: 100%;
					 display: flex;
					 align-items: center;
					 justify-content: space-around;
					 .selectedPicker{
						 width: 45%;
					 }
				 }

			.title {
				height: 42rpx;
				font-size: 30rpx;
				font-weight: 600;
				line-height: 42rpx;
				color: #3F4A58;
				margin-bottom: 17rpx;
			}

			.nat {
				flex: 1;
				text-align: center;
				margin: 0 24rpx;
				height: 40rpx;
				font-size: 28rpx;
				font-weight: 400;
				line-height: 40rpx;
				color: #798594;
			}

			.icon {
				width: 24rpx;
				height: 24rpx;
			}
		}

		.btn_wrap {
			position: fixed;
			bottom: 32rpx;
			left: 32rpx;
			width: 686rpx;
			display: flex;
			flex-direction: row;
			z-index: 222;

			.del_btn {
				width: 212rpx;
				height: 104rpx;
				text-align: center;
				line-height: 104rpx;
				font-size: 36rpx;
				font-weight: 400;
				color: #798594;
				background: rgba(146, 155, 167, 0.15);
				border-radius: 16rpx;
				margin-right: 26rpx;
			}

			.con_btn {
				flex: 1;
				height: 104rpx;
				text-align: center;
				line-height: 104rpx;
				font-size: 36rpx;
				font-weight: 400;
				color: #fff;
				background: #5B90FF;
				border-radius: 16rpx;
			}
		}

		.pop {
			width: 500rpx;
			/* #ifdef MP-WEIXIN */
			margin: 360rpx auto 0 auto;
			/* #endif */
			/* #ifdef H5 */
			margin: 500rpx auto 0 auto;
			/* #endif */
			/* #ifdef APP-PLUS */
			margin: 360rpx auto 0 auto;
			/* #endif */
			background: #fff;
			border-radius: 16rpx;
			padding: 76rpx 48rpx 52rpx 48rpx;

			.point {
				text-align: center;
				height: 50rpx;
				font-size: 36rpx;
				font-weight: 600;
				line-height: 50rpx;
				color: #3F4A58;
				margin-bottom: 64rpx;
			}

			.btn_wrap_confirm {
				width: 100%;
				display: flex;
				flex-direction: row;

				.btn {
					flex: 1;
					height: 88rpx;
					text-align: center;
					line-height: 88rpx;
					font-size: 30rpx;
					font-weight: 400;
					border-radius: 16rpx;

					&:first-child {
						background: rgba(146, 155, 167, 0.15);
						color: #798594;
						margin-right: 38rpx;
					}

					&:last-child {
						background: #5B90FF;
						color: #fff;
					}
				}
			}
		}
	}
</style>
